

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body{
    background: url('../img/food.png');
    
    font-size: 10px;
}

.carousel{        
    position: relative;
    top: -61px;
    border: 0px solid black;
    background-color: rgba(0,0,0, .2);
}

.carousel-inner{
/*    max-height: 700px;
    max-width: 1200px;*/
    margin: 10px auto;
    /*padding: 10px;*/
/*    border: 2px solid white;
    border-radius: 20px 20px 0px 0px;*/
}

.carousel-inner img{
/*    border-radius: 10px;
    border-top: 10px dotted black;*/
}

.carousel-control.right{
    background-image: linear-gradient(to right,rgba(200, 150, 85, 0.001) 0,rgba(200, 150, 85, 0.8) 100%);
    background-repeat: repeat-x;
}


.carousel-control.left{
    background-image: linear-gradient(to right,rgba(200, 150, 85, 0.8) 0,rgba(200, 150, 85, 0.001) 100%);
    background-repeat: repeat-x;
}

.carousel-control.right:hover{
    background-image: linear-gradient(to right,rgba(200, 150, 85, 0.0001) 0,rgba(200, 150, 85, 1) 100%);
    background-repeat: repeat-x;
}


.carousel-control.lefthover{
    background-image: linear-gradient(to right,rgba(200, 150, 85, 1) 0,rgba(200, 150, 85, 0.0001) 100%);
    background-repeat: repeat-x;
}

.item{
        background-size: cover;
        text-align: center;
        
}

.item img{
    border: 2px solid wheat;    
}

.navbar{
    position: relative;
    top: -72px;
    
    font-size: 1.2em;
    z-index: 10;
}

.navbar-collapse{
    padding-left: 100px;
}
.nav{float: right;}


.info{
    z-index: 3;
    font-size: 1.5em;
    padding: 0.5em 3em;
    margin-top: -30px;
}

footer p{
    text-align: center;
}

@media (max-width: 766px) { 
    .nav{float: left; width: 100%;}
    
    .navbar-collapse{
        padding-left: 30px;
    }
    body{font-size: 1.1em;}
    
}

@media (min-width: 767px) and (max-width: 1199px){ 
    .nav{float: left;}
    
    .carousel-inner{
        max-height: 700px;
    }
    
    body{font-size: 1.2em;}
}


@media screen and (min-width: 1200px) , screen and (max-height: 750px) {
    .carousel-inner{
        max-height: 500px !important;
        width: 1000px;
    }
    
    body{font-size: 1.2em;}
    
    .info{
        z-index: 3;
        font-size: 1.4em;
        padding: 0.3em 3em;
        margin-top: -66px;
        font-weight: 700;
        font-family: times;
    }
}

@media (min-width: 1367px) {
    .carousel-inner{
        max-height: 700px !important;
        width: 1200px;
    }
    body{font-size: 1.5em;}
}




